<template>
  <el-container>
    <div class="logo"></div>
    <el-main>
      <el-form label-position="left" label-width="70px">
        <el-form-item label="用户名">
          <el-input placeholder="请输入用户名" v-model=uname  @blur="check()"></el-input>
          <div id="tips" style="color='red'">{{tips}}</div>
        </el-form-item>
        <el-form-item >
          <label slot="label">密&nbsp;&nbsp;&nbsp;码</label>
          <el-input show-password v-model=pwd placeholder="请输入密码"  ></el-input>
        </el-form-item>
          <el-button type="success" :disabled="disabled" @click="register()" >注 册</el-button>
      </el-form>
    </el-main>
    <el-footer>
      <el-link><router-link to="Login">登入</router-link></el-link>
      <el-link><router-link to="">忘记密码</router-link></el-link>
    </el-footer>
  </el-container>
</template>

<script>
export  default{
  name: 'register',
  data () {
    return {
        uname:"",
        pwd:"",
        tips:""
    }
  },
  methods:{
    register(){
       this.$http.post('api/users/register',{
         uname:this.uname,
         password:this.pwd
       }).then(data=>{
         console.log(data);
         if(data.data.errCode == 0){
           this.$router.push("Login");
         }
       })
    },
    check(){
      this.$http.post('api/users/check',{
        uname:this.uname
      }).then(data=>{
         if(data.data.errCode==1){
             this.tips='该用户名已注册';
         }else if(data.data.errCode==2){
            this.tips = '用户名不能为空';
         }else{
             this.tips='用户可用';
         }
      })
    },
  },
  computed:{
    disabled:function(){
      return (this.uname!=''&&this.pwd!=''&&this.tips!='该用户名已注册')?false:true;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 .el-footer .el-link:nth-child(1){
      float:left;
  }
 .el-footer .el-link:nth-child(2){
    float:right;
  }
  .el-button--success{
    width:100%;
    background-color:lightskyblue ;
  }
.logo{
      width: 200px;
      height: 200px;
      background: url(../../assets/images/logo.png) no-repeat;
      background-size:contain ;
      margin: auto;
      margin-top: 25px;
    }
</style>
